import React, { useState } from 'react';
import { View, TextInput, Button, Alert, Pressable, Text, StyleSheet, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import axios from 'axios';
import Toast from 'react-native-toast-message';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function LoginScreen() {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const navigation = useNavigation();
  const handleLogin = () => {
    // 在这里处理登录逻辑
    console.log(`手机号: ${phone}\n密码: ${password}`);
    axios.post('http://47.111.227.58:3000/login/loginUser', {
      data: {
        phone: phone,
        password: password
      }
    })
      .then(function (res) {
        // console.log(res.data);
        if (res.data.code === 200) {
          AsyncStorage.setItem('userInfo', JSON.stringify(res.data.data.data));
          AsyncStorage.setItem('token', res.data.data.data.token);
          AsyncStorage.setItem('name', JSON.stringify(res.data.data.data.username));
          AsyncStorage.setItem('loginStatus', String(true));
          Toast.show({
            type: 'success',
            text1: res.data.data.msg,
          });
          navigation.replace('TabNavApp');
        } else {
          Toast.show({
            type: 'error',
            text1: res.data.data.msg,
          });
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 16, backgroundColor: '#FFF' }}>
      <View style={styles.container}>
        <Image
          source={require('../assets/duoduo.jpg')}
          style={{ width: 70, height: 70}}
        />
        <Text style={styles.title}>朵朵校友圈</Text>
        <Text style={styles.subtitle}>一个大学生有问必答的社区</Text>
      </View>
      <TextInput
        style={{ height: 40, borderColor: '#808080', borderWidth: 1, marginBottom: 16, borderRadius: 5, paddingLeft: 10 }}
        onChangeText={setPhone}
        value={phone}
        placeholder="用户名"
      />
      <TextInput
        style={{ height: 40, borderColor: '#808080', borderWidth: 1, marginBottom: 16, borderRadius: 5, paddingLeft: 10 }}
        onChangeText={setPassword}
        value={password}
        placeholder="密码"
        secureTextEntry
      />
      <Button
        title="登录"
        onPress={handleLogin}
        color="#EB7A76"
      />
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
        <Pressable onPress={() => navigation.navigate('Register')}>
          <Text style={{ color: '#EB7A76' }}>注册账号</Text>
        </Pressable>
        <Pressable onPress={() => navigation.navigate('FindPassword')}>
          <Text style={{ color: '#EB7A76' }}>修改密码</Text>
        </Pressable>
      </View>
    </View>
  );

}
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});
